<template>
  <div class="cbjtqk w100">
    <div class="header space-between align-center">
      <div class="flex align-center">
        <img :src="imgUrl + '/profile/personinfo/2023/6/20/lang3_f8f39a01722849fbb749aefb25d9c755.png'" class="img" />
        <div class="name">承包家庭情况</div>
      </div>
      <img
        v-show="show"
        @click="handleClick"
        :src="imgUrl + '/profile/personinfo/2023/6/20/lang2_d966d366dae5476a8e6889b30b1b8c82.png'"
        class="img1"
      />
    </div>
    <div class="middle space-between align-center w100">
      <div class="middle-left align-center flex-column space-between">
        <div class="w100">
          <div>承包家庭总数</div>
          <div class="list-bg w100 space-between align-center">{{ info.val9 || 0 }} 户</div>
        </div>
        <div class="w100">
          <div>流转家庭数量</div>
          <div class="list-bg w100 space-between align-center">{{ info.val10 || 0 }} 户</div>
        </div>
        <div class="w100">
          <div>承包农田面积</div>
          <div class="list-bg w100 space-between align-center">{{ Number(info.val11).toFixed(2) || 0 }} 亩</div>
        </div>
      </div>
      <div class="right">
        <div ref="family" class="h100p w100"></div>
      </div>
    </div>
    <img :src="imgUrl + '/profile/personinfo/2023/6/20/lang4_73a1fc1e81c446e5894ac4101272c833.png'" class="img2 w100" />
  </div>
</template>

<script>
export default {
  name: 'Cbjtqk',
  props: {
    info: {
      type: Object,
      default: () => {}
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      imgUrl: process.env.VUE_APP_IMG_API
    }
  },
  mounted() {
    this.family()
  },
  methods: {
    family() {
      if (this.info.val12) {
        const arr = this.info.val12.split(',')

        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center',
            textStyle: {
              color: '#ffffff' //字体颜色
            }
          },
          color: ['#0FA7FF', '#00F8FF'],
          series: [
            {
              type: 'pie',
              radius: ['40%', '70%'],
              center: ['50%', '60%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },

              emphasis: {
                label: {
                  show: true,
                  fontSize: 12,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: arr[0], name: '自种家庭数量' },
                { value: arr[1], name: '流转家庭数量' }
              ]
            }
          ]
        }
        const echarts = this.$echarts.init(this.$refs.family)
        echarts.setOption(option, true)
      }
    },
    handleClick() {
      this.$emit('onClick')
    }
  }
}
</script>

<style lang="scss" scoped>
.cbjtqk {
  //height: 4.16rem;
  height: calc((100vh - 1.2rem) / 3);

  .middle {
    height: 3.5rem;

    .middle-left {
      margin-left: 0.2rem;
      width: 2.25rem;
      height: 2.8rem;
    }

    .right {
      width: 3.5rem;
      height: 100%;
      margin-right: 0.4rem;
    }
  }

  .header {
    width: 100%;
    background-size: 100% 100%;
    font-size: 0.18rem;
    height: 0.42rem;
    background-image: url('https://emindt-scheduling.oss-cn-hangzhou.aliyuncs.com/profile/personinfo/2023/6/20/lang7_a953852ebaf143d2994fe879e106efda.png');
    background-repeat: no-repeat;
    background-position-x: center;
    box-sizing: border-box;

    .img {
      width: 0.16rem;
      height: 0.14rem;
      margin-left: 0.1rem;
      margin-right: 0.15rem;
    }

    .img1 {
      width: 0.36rem;
      height: 0.16rem;
      margin-right: 0.1rem;
    }
  }

  //.img2 {
  //  height: 0.08rem;
  //}

  .list-bg {
    margin-top: 0.1rem;
    background-size: 100% 100%;
    font-size: 0.2rem;
    padding-left: 0.1rem;
    color: #00cdff;
    height: 0.43rem;
    background-image: url('https://emindt-scheduling.oss-cn-hangzhou.aliyuncs.com/profile/personinfo/2023/6/20/lang8_f7bfc9009903420bbf7db883a8bd4b80.png');
    background-repeat: no-repeat;
    background-position-x: center;
    box-sizing: border-box;
  }
}
</style>